<template>
  <div>
    <el-button size="medium" @click="formExit" circle>
      <Icon icon="ep:back" />
    </el-button>
    <vxe-grid v-bind="gridOptions"   v-on="gridEvents"/>
  </div>
  <!-- 表单详情的弹窗 -->
  <Dialog v-model="detailVisible" title="表单详情" width="800">
    <form-preview :formDataVo="formDataVo" />
  </Dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted, defineProps, PropType } from 'vue'
import { VxeGridListeners, VxeGridProps } from 'vxe-table'
import { FormDataApi } from '@/api/res/FormData'

import { DesignerMixinData, useDesignerMixin } from '@/components/Designer/mixins/DesignerMixin'
import * as FormApi from '@/api/bpm/form'
import { setConfAndFields2 } from '@/utils/formCreate'
import { GetFromDataVo } from '@/api/res/FormData/vo/GetFormDataVo'

const props = defineProps({
  propMixin: Object as PropType<DesignerMixinData>
})
const useDesigner = useDesignerMixin(props.propMixin)
const dsgnItem = props.propMixin.dsgnItem
const actionItem = props.propMixin.actionItem

// /** 详情操作 */
const detailVisible = ref(false)
const formDataVo = ref(null)
// const detailData = ref({
//   rule: [],
//   option: {}
// })
const openDetail = async (formDataId: number,formDsgnId:number) => {

  formDataVo.value = new GetFromDataVo()
  formDataVo.value.formDataId = formDataId
  formDataVo.value.formDsgnId = formDsgnId

  // 弹窗打开
  detailVisible.value = true
}


const columns = ref<VxeGridColumn[]>([])

const gridOptions = reactive<VxeGridProps>({
  border: true,
  loading: false,
  height: 600,
  toolbarConfig: {
    refresh: true,
    import: true,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  columnConfig: {
    resizable: true
  },
  rowConfig: {
    isHover: true
  },
  columns: columns,
  data: [],
  pagerConfig: {
    total: 0,
    currentPage: 1,
    pageSize: 10
  }
})

const formPage = {
  pageSize: 10,
  pageNum: 0
}

function handlePageData() {

  gridOptions.loading = true
  const resId = useDesigner.getResId()
  const formTbl = 'Form_data_' + resId
  let formDataReqVo = {
    [`${formTbl}[]`]: {
      page: formPage.pageNum,
      count: formPage.pageSize,
      [`${formTbl}`]: {},
      query: 2
    },
    'total@': '/[]/total'
  }
  FormDataApi.getFormListPage(formDataReqVo)
    .then((res) => {
      if (res) {
        gridOptions.data = res[`${formTbl}[]`]
        gridOptions.pagerConfig.total = res[`${formTbl.toLowerCase()}ListTotal`]
      } else {
        console.error('API 返回的数据格式不正确')
      }
    })
    .catch((error) => {
      console.error('API 请求失败: ', error)
    })
    .finally(() => {
      gridOptions.loading = false
    })
}
const gridEvents: VxeGridListeners = {
  pageChange({ pageSize, currentPage }) {
    gridOptions.pagerConfig.currentPage = currentPage
    gridOptions.pagerConfig.pageSize = pageSize
    formPage.pageNum = currentPage-1
    formPage.pageSize = pageSize
    handlePageData()
  },
  cellClick ({ row, column }) {
    console.log(`单击行：${row.id} 单击列：${column.title}`)
  },
  cellDblclick ({ row, column }) {
    openDetail(row.formDataId,row.formDsgnId)
    console.log(`双击行：${row.id} 双击列：${column.title}`)
  }
}
onMounted(() => {


  const resId = useDesigner.getResId()

  FormDataApi.getFormColumns({
    resId: resId
  }).then((res) => {
    if (res) {
      columns.value = res.columns
    } else {
      console.error('API 返回的数据格式不正确')
    }
  })
  handlePageData()


})

const emit = defineEmits(['exitEvent'])
//表单退出、返回
const formExit = () => {
  emit('exitEvent')
}
</script>
